<template>
    <van-cell center to="/me/profile">
        <template #title>
            <div class="head-title-container" style="width: 90%;">
                <div class="head-avatar-container">
                    <van-image
                    round
                    fit="cover"
                    width="60px"
                    height="60px"
                    src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                    />
                </div>
                <div class="head-info-container">
                    <p style="font-size:18px;line-height:10px;margin-left: 10px;">昵称：</p>
                    <p style="font-size:7px;line-height:5px;margin-left: 10px;"><span>性别：</span><span>年龄：</span></p>
					<p style="font-size:7px;line-height:5px;margin-left: 10px;"><span>关注：</span><span>粉丝：</span></p>
					<p style="font-size:7px;line-height:5px;margin-left: 10px;">motto：大比武</p>
                </div>
            </div>
        </template>
        <template #right-icon>
            <van-icon name="arrow" color="rgb(150,150,150)"/>
        </template>
    </van-cell>
    <div style="height:10px"></div>
    <van-cell value="我的文章" icon="comment-o"   is-link to="index" />
    <van-cell value="我的评论" icon="comment-circle-o"  is-link to="index" />
	<div style="height:10px"></div>
    <van-cell value="设置" icon="setting-o" cellsize="100px"  is-link to="index" />
</template>
<script>
	export default{
		name:'MyView',
		setup() {
			const themeVars = {
                cellLineHeight: '150px',
                cellIconSize:'150px',
			}
			return {
                themeVars,
			};
		},
	};
</script>

<style lang="scss" scoped>
    .head-title-container {
        display: flex;
        .head-avatar-container {
            display: flex;
            justify-content: center;
            flex-direction: column;
        }
		.head-info-container {
			display: flex;
			align-items: flex-start;
			flex-direction: column;
		}
    }
</style>